<template>
  <el-row style="padding: 15px 0 15px 0;">
    <el-col :span="4">
      <span style="line-height: 30px;">{{ keyName }}{{ syncValue }}</span>
    </el-col>
    <el-col :span="6">
      <el-input
        v-if="!getList"
        v-model="myValue"
        placeholder="请输入内容"
        style="font-size: 14px; width: 300px;"
        class="input"
        @blur="change"
      ></el-input>
      <el-autocomplete
        v-else
        style="font-size: 14px; width: 300px;"
        class="inline-input input"
        v-model="myValue"
        :fetch-suggestions="select"
        placeholder="请输入内容"
        @select="change"
      ></el-autocomplete>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { IsSelect, GetList } from "../../typing"

@Component
export default class NginxConfig extends Vue {
  public getList: GetList;
  public myValue = "";

  @Prop(String)
  public keyName: string;

  @Prop(String)
  public value: string;

  @Prop()
  public isSelect: IsSelect;

  constructor(...args: any) {
    super(...args);
    if (this.isSelect) {
      this.getList = this.isSelect(this.keyName);
    }
  }

  public select(queryStr: string, callback: any) {
    this.getList(this.keyName, (list: any[]) => {
      callback(list.map((value: any) => ({ value })));
    });
  }

  public change() {
    if (this.value !== this.myValue) {
      this.$emit("change", this.keyName, this.myValue);
    }
  }

  get syncValue() {
    this.myValue = this.value;
    return this.value ? "" : "";
  }
}
</script>

<style scoped>
.input /deep/ .el-input__inner {
    color: #000;
}
</style>